import Schema from 'async-validator'
import QQMapWX from '../../../libs/qqmap-wx-jssdk.min'
import { toast } from '../../../../../utils/expendApi'
import { reqAddress, reqUpdateAddress, reqAddressInfo } from '../../../api/address'
Page({
  /**
   * 页面的初始数据
   */
  data: {
    name: '', // 收货人
    phone: '', // 手机号
    provinceName: '', // 省
    provinceCode: '', // 省编码
    cityName: '', // 市
    cityCode: '', // 市编码
    districtName: '',// 区
    districtCode: '', // 区编码
    address: '', //详细地址
    fullAddress: '', //完整地址
    isDefault: 0 // 是否默认地址 
  },
  // 省市区选择
  onAddressChange(e) {
    // console.log(e)
    const [ provinceName, cityName, districtName ] = e.detail.value
    const [ provinceCode, cityCode, districtCode ] = e.detail.code
    this.setData({
      provinceName, cityName, districtName,provinceCode, cityCode, districtCode 
    })
  },
  // 获取用户地理位置信息
  async onLocation () {
     // 获取当前的地理位置(精度维度高度) permission scope.userLocation 这里用 下面的方法不用设置
    // const res = await wx.getLocation()  
   
    // 打开地图 让用户选择地里位置
    // const res = await wx.chooseLocation()
    // console.log(res)
    // 逆解析
    const { latitude, longitude, name } = await wx.chooseLocation() 
    this.qqmapwx.reverseGeocoder({
      location: {
        latitude, 
        longitude
      },
      success: (res) => {
        // console.log(res) 获取省市区及编码
        const { adcode, province,city,district } = res.result.ad_info

        //获取街道以及门牌 可能为空
        const { street, street_number } = res.result.address_component

        //获取标准地址
        const { standard_address } = res.result.formatted_addresses

        // 格式化数据 赋值给data
        this.setData({
          provinceName: province, 
          cityName: city, 
          districtName: district,
          // 省 前2位有值,后四位是0
          provinceCode: adcode.replace(adcode.substring(2,6), '0000'), 
           // 市 前4位有值,后两位是0
          cityCode: adcode.replace(adcode.substring(4,6), '00'), 
           // 区 就是 adcode
           // 东莞市、中山市、儋州市、嘉峪关市 因其下无区县级
          districtCode:district && adcode,
          // 详细地址
          address: street + street_number + name, 
          // 完整地址
          fullAddress: standard_address + name, 
        })
      }
    })
  },
  // 收货地址参数验证
  validatorAddress(params) {
    // 验证收货人，是否只包含大小写字母、数字和中文字符
    const nameRegExp = '^[a-zA-Z\\d\\u4e00-\\u9fa5]+$'

    // 验证手机号，是否符合中国大陆手机号码的格式
    const phoneReg = '^1(?:3\\d|4[4-9]|5[0-35-9]|6[67]|7[0-8]|8\\d|9\\d)\\d{8}$'

    // 创建验证规则
    const rules = {
      name: [
        {required: true, message: '请输入收货人姓名'},
        { pattern: nameRegExp, message: '收货人姓名不合法'}
      ],
      phone: [
        { required: true, message: '请输入收货人手机号' },
        { pattern: phoneReg, message: '收货人手机号不合法'}
      ],
      provinceName: { required: true, message: '请选择收货人所在地区' },
      address: { required: true, message: '请输入详细地址' },
    }

    // 传入验证规则 并实例化
    const validator = new Schema(rules)
    // 调用实例方法 进行验证 希望将结果通过promise返回
    return new Promise((resolve) => {
      validator.validate(params, (errors, fields) => {
        if(errors) {
           // 验证失败
           toast({title: errors[0].message})
           // 如果属性值是false,说明验证失败
           resolve({ valid: false})
        } else {
          resolve({ valid: true})
        }
      })
    })

  },
  // 保存按钮
  async saveAddrssForm() {
    console.log(111)
    const { provinceName, cityName, districtName, address, isDefault } = this.data
    const params = {
      ...this.data,
      fullAddress: provinceName + cityName + districtName + address,
      isDefault: isDefault?1:0
    }
    // 参数验证,通过后,调用新增接口
    const { valid } = await this.validatorAddress(params)
    console.log(valid)
    if(!valid) return 
    console.log(333)
    const res = this.addressId?await reqUpdateAddress(params): await reqAddress(params)
    if(res.code == 200) {
      // 返回收货地址列表页面
      wx.navigateBack({
        success: () =>{
          toast({title: this.addressId?'更新收货地址成功': '新增收货地址成功'})
        }
      })
    }
  },
  // 处理更新逻辑
  async showAddressInfo (id) {
    if(!id) return
    // 将id挂载到页面实例this上
    this.addressId = id
    wx.setNavigationBarTitle({
      title: '更新收货地址',
    })
    const { data } = await reqAddressInfo(id)
    this.setData(data)
  },
  onLoad(options) {
    // 对核心类实例化 挂在到this上 方便其他人使用
    // 记得腾讯后台配置 额度
    this.qqmapwx = new QQMapWX({
      key: 'T5WBZ-34LKI-2ZSG2-USII5-CSW72-ZVF3C'
    })
    // 通过id判断是添加还是修改
    this.showAddressInfo(options.id)
  },

})